<template>
  <view class="scan-container">
    <!-- 扫码框容器，包含扫码框图片和二维码图片 -->
    <view class="colorimage"></view>
    <view class="topcolor">
      <view class="scan-box" @click="chooseImage">
        <!-- 扫码框图片 - 作为外框 -->
        <image class="scan-frame" src="@/img/01核销操作-01扫码核销_slices/扫码 (2).png" mode="widthFix"></image>
        <!-- 二维码图片 - 位于扫码框内部，支持上传预览 -->
        <template v-if="imageUrl">
          <image class="qr-code" :src="imageUrl" mode="widthFix"></image>
        </template>
        <template v-else>
          <image class="qr-code" src="@/img/01核销操作-01扫码核销_slices/二维码.png" mode="widthFix"></image>
        </template>
<!--        上传提示文字
        <text class="upload-tip">点击上传图片</text> -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '' // 存储上传的图片路径
    };
  },
  onLoad() {
    // 页面加载时的初始化操作
  },
  methods: {
    // 选择图片并上传
    chooseImage() {
      uni.chooseImage({
        count: 1, // 只允许选择1张图片
        sizeType: ['original', 'compressed'], // 支持原图和压缩图
        sourceType: ['album', 'camera'], // 支持相册和相机拍摄
        success: (res) => {
          // 获取选中的图片临时路径
          const tempFilePaths = res.tempFilePaths;
          this.imageUrl = tempFilePaths[0];
          
          // 这里可以添加图片上传到服务器的逻辑
          this.uploadToServer(tempFilePaths[0]);
        },
        fail: (err) => {
          console.error('选择图片失败', err);
          uni.showToast({
            title: '选择图片失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 上传图片到服务器
    uploadToServer(filePath) {
      // 实际项目中替换为你的上传接口地址
      const uploadUrl = 'https://your-server.com/upload';
      
      uni.uploadFile({
        url: uploadUrl,
        filePath: filePath,
        name: 'file', // 后端接收文件的参数名
        formData: {
          'type': 'qr_code' // 可选：添加额外的表单数据
        },
        success: (uploadRes) => {
          console.log('上传成功', uploadRes.data);
          // 解析服务器返回结果
          const result = JSON.parse(uploadRes.data);
          if (result.success) {
            uni.showToast({
              title: '上传成功',
              icon: 'success'
            });
            // 如果需要保存服务器返回的图片地址，可以在这里处理
            // this.imageUrl = result.imageUrl;
          } else {
            uni.showToast({
              title: '上传失败',
              icon: 'none'
            });
          }
        },
        fail: (err) => {
          console.error('上传失败', err);
          uni.showToast({
            title: '上传失败',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.scan-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 100rpx;
  height: 100vh;
  background-color: #f5f5f5;
  padding-left: 20rpx;
  padding-right: 20rpx;
  position: relative;
  z-index: 1;
}

.colorimage {
  position: absolute;
  background-color: #3399ff;
  height: 300rpx;
  margin-top: -100rpx;
  width: 100%;
  z-index: 2;
}

.scan-box {
  position: relative;
  width: 300rpx;
  height: 300rpx;
  margin-top: 160rpx;
  margin-left: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer; /* 显示点击指针 */
}

.topcolor {
  margin-top: -20rpx;
  width: 100%;
  height: 100%;
  border-radius: 20rpx;
  z-index: 3;
  background-color: white;
}

/* 扫码框图片样式 */
.scan-frame {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}

/* 二维码图片样式 */
.qr-code {
  width: 70%;
  height: 70%;
  position: relative;
  z-index: 0;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

/* 上传提示文字 */
.upload-tip {
  position: absolute;
  bottom: -60rpx;
  left: 50%;
  transform: translateX(-50%);
  color: #666;
  font-size: 26rpx;
  z-index: 1;
}
</style>